import { clsx } from 'clsx';
import './styles.less';

interface ProgressBarProps {
  progress: number; // 0-100
  showLabel?: boolean;
  size?: 'small' | 'medium' | 'large';
  color?: 'primary' | 'success' | 'warning' | 'danger';
  animated?: boolean;
  striped?: boolean;
  className?: string;
}

export const ProgressBar: React.FC<ProgressBarProps> = ({
  progress,
  showLabel = false,
  size = 'medium',
  color = 'primary',
  animated = false,
  striped = false,
  className,
}) => {
  const clampedProgress = Math.max(0, Math.min(100, progress));

  return (
    <div className={clsx('progress-bar', `progress-bar--${size}`, className)}>
      <div
        className={clsx(
          'progress-bar__track',
          `progress-bar__track--${color}`,
          animated && 'progress-bar__track--animated',
          striped && 'progress-bar__track--striped'
        )}
      >
        <div
          className='progress-bar__fill'
          style={{ width: `${clampedProgress}%` }}
          role='progressbar'
          aria-valuenow={clampedProgress}
          aria-valuemin={0}
          aria-valuemax={100}
        >
          {showLabel && <span className='progress-bar__label'>{clampedProgress.toFixed(0)}%</span>}
        </div>
      </div>
    </div>
  );
};

export default ProgressBar;
